<script setup>
import {ref} from "vue";
import {useOrderInfoStore} from "@/stores/index.js";
import {userDefaultAddr, userDeleteAddrById, userGetAddrByUserId, userUpdateAddrById} from "@/api/user.js";
import {ElMessage} from "element-plus";

// 是否显示
const isChangeAddr = defineModel()
// 地址列表
const addrList = ref()
// 使用OrderInfo
const orderInfo = useOrderInfoStore()
// 获取地址列表
const getAddr = async (id) => {
  const res = await userGetAddrByUserId(id)
  addrList.value = res.data
}
// 调用方法获取地址
getAddr(orderInfo.goodsInfo.id)
// 删除地址
const deleteById = async (id) => {
  await userDeleteAddrById(id)
  getAddr(orderInfo.goodsInfo.id)
  ElMessage.success('删除成功')
}
// 更换地址
const changeAddress = (item) => {
  orderInfo.setAddrInfo(item)
  isChangeAddr.value = false
}
// 编辑地址
const editIndex = ref(null)
// 是否为编辑状态
const edit = (index) => {
  editIndex.value = index
}
const subEdit = async (id, name, address, phone) => {
  await userUpdateAddrById(id, name, address, phone)
  ElMessage.success('修改成功')
  editIndex.value = null
}
const defaultAddr = async (item) => {
  await userDefaultAddr(item.id, orderInfo.goodsInfo.id)
  ElMessage.success('设置成功')
}
// 关闭后刷新数据
defineEmits(['flushed'])
</script>

<template>
  <el-dialog
      v-model="isChangeAddr"
      title="更换地址"
      :width="editIndex !== null ? 713 : 759 "
      v-if="addrList"
      :before-close="$emit('flushed')"
  >
    <div class="dz-info">
      <ul>
        <li class="item" v-for="(item, index) in addrList" :key="item">
          <div class="name-box" @click="changeAddress(item)">
            <span>{{ item.name }} {{ item.address.substring(0,2) }}</span>
            <b></b>
          </div>
          <div class="address-detail">
            <span class="addr-name">
              <el-input
                  style="width: 70px"
                  v-if="editIndex === index"
                  v-model="item.name" />
              <span v-else>{{ item.name }}</span>
            </span>
            <span class="addr-info">
              <el-input
                  style="width: 162px"
                  v-if="editIndex === index"
                  v-model="item.address" />
              <span v-else>{{ item.address }}</span>
            </span>
            <span class="addr-phone">
              <el-input
                  style="width: 108px"
                  v-if="editIndex === index"
                  v-model="item.phone" />
              <span v-else>{{ item.phone }}</span>
            </span>
          </div>
          <el-button
              @click="editIndex === index ? subEdit(item.id, item.name, item.address, item.phone) : edit(index)"
              class="delete">
            {{ editIndex === index ? '确认' : '编辑' }}
          </el-button>
          <el-button @click="deleteById(item.id)" class="edite">
            删除
          </el-button>
          <el-button v-if="editIndex === null" @click="defaultAddr(item)">设为默认</el-button>
        </li>
      </ul>
    </div>
    <template #footer>
      <div class="dialog-footer">
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.dz-info {
  height: 42px;

  li {
    height: 30px;
    margin-bottom: 15px;

    .delete {
      margin-left: 34px;
    }
  }

  .name-box {
    text-align: center;
    border: 2px solid #e4393c;
    width: 144px;
    height: 30px;
    float: left;
    cursor: pointer;

    span {
      position: relative;
      top: 3px;
    }
  }

  .address-detail {
    float: left;
    height: 30px;
    line-height: 30px;

    span {
      display: inline-block;
      margin-left: 10px;
    }
  }

}

.dialog-footer {
  margin-top: 62px;
}
</style>
